<template>
    <div class="comment-container">
        <h3>发表评论</h3>
        <hr/>
        <div class="input">
            <input type="text" placeholder="名字" v-model="name"/>
            <textarea v-model="content" placeholder="请输入要BB的内容（最多BB120个字）" maxlength="120"></textarea>
            <Button type="info" block @click="addComment">发表评论</Button>
        </div>
        <div class="comment" v-for="item in comments" :key="item.id">
            <div class="header">
                <span>{{ item.index }}楼</span>
                <span>{{ item.name || '匿名用户' }}</span>
                <span>{{ item.date | dateFormat }}</span>
            </div>
            <p>{{ item.content || '这个人很懒，什么都没写！' }}</p>
        </div>
    </div>
</template>

<script>
import { Button } from 'vant';
import { nanoid } from 'nanoid';

// 评论组件
export default {
    components: { Button },
    data() {
        return {
            name: '',
            content: '',
            comments: [
                { id: nanoid(), index: 1, name: '张三', content: '说啥嘞', date: Date.now() },
                { id: nanoid(), index: 2, name: '李四', content: '奈何本人没文化，一句卧槽行天下', date: Date.now() },
                { id: nanoid(), index: 3, name: '王五', content: '卖瓜子儿', date: Date.now() },
                { id: nanoid(), index: 4, name: '郑六', content: '吃瓜嘞', date: Date.now() },
            ]
        };
    },
    methods: {
        // 添加评论
        addComment() {
            this.comments.unshift({ 
                id: nanoid(), 
                index: this.comments.length + 1,
                name: this.name, 
                content: this.content,
                date: Date.now()
            });
            this.name = this.content = '';
        }
    }
}
</script>

<style lang="less" scoped>
.comment-container {
    width: 100%;
    box-sizing: border-box;
    h3 {
        padding: 0 10px;
        margin-bottom: 5px;
    }
    .input {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        margin-bottom: 10px;
        input {
            width: 100%;
            height: 40px;
            box-sizing: border-box;
            border-radius: 5px;
            padding: 0 5px;
            border: 1px solid #999;
            &:focus {
                border-color: #00a1d6;
            }
        }
        textarea {
            width: 100%;
            height: 100px;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 5px;
            border-color: #999;
            font-size: 14px;
            margin: 10px 0;
            &:focus {
                border-color: #00a1d6;
            }
        }
    }
    .comment {
        box-sizing: border-box;
        padding: 10px 0;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 32px;
            background-color: #000;
            color: #fff;
            padding: 0 10px;
            font-size: 14px;
        }
        p {
            margin: 0;
            padding: 0 10px;
            padding-top: 10px;
            font-size: 14px;
            color: #817a7a;
        }
    }
}
</style>